<template>
  <el-card>
    <div class="title">班级座位表</div>
    <div class="sitTable">
      <table border="1">
        <tbody>
          <tr v-for="(row, rowIndex) in sitting" :key="rowIndex">
            <td v-for="(name, colIndex) in row" :key="colIndex">{{ name }}</td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <th colspan="2">第一组</th>
            <th colspan="2">第二组</th>
            <th colspan="2">第三组</th>
            <th colspan="2">第四组</th>
            <th colspan="2">第五组</th>
          </tr>
        </tfoot>
      </table>
    </div>
  </el-card>
</template>

<script>
import { ref, onMounted } from 'vue'
import axios from 'axios'

export default {
  setup() {
    const sitting = ref([])

    const fetchSittingData = async () => {
      try {
        const response = await axios.get('/api/situation/getAllSituation')
        if (response.data.code === 0) {
          const data = response.data.data
          const rows = Array.from({ length: 7 }, () => Array(10).fill(''))
          data.forEach(({ name, sitRow, sitColumn }) => {
            if (sitRow !== -1 && sitColumn !== -1) {
              rows[sitRow][sitColumn] = name
            }
          })
          sitting.value = rows
        }
      } catch (error) {
        console.error('Error fetching data:', error)
      }
    }

    onMounted(() => {
      fetchSittingData()
    })

    return { sitting }
  },
}
</script>

<style scoped lang="scss">
.title {
  margin-bottom: 18px;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}

table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border: 1px solid #ddd;
}

th,
td {
  padding: 8px;
  text-align: center;
  border: 1px solid #ddd;
}

th {
  background-color: #f2f2f2;
  font-weight: bold;
}

tr:nth-child(even) {
  background-color: #f9f9f9;
}

tr:hover {
  background-color: #f1f1f1;
}
</style>
